<template>
  <div>
    <el-row :gutter="10" style="margin-top:20px">
      <el-col :xs="20" :lg="20" :offset="2">
        <div class="commentTitle">
          <span style="color:#409EFF;cursor:pointer;margin-right:10px" @click="wentback"></span>
          <span>课评详情</span>
        </div>
        <div class="commentDetail">
          <div class="commentTitle">{{title}}</div>
          <div>
            <span class="edit_span">总体</span>
            <el-rate
              v-model="stars.score"
              :max="stars.max"
              allow-half
              show-score
              disabled
              style="display:inline-block"
            ></el-rate>
          </div>
          <div>
            <span class="edit_span">逻辑性：</span>
            <el-rate
              v-model="stars.logicality"
              disabled
              :max="stars.max"
              allow-half
              show-score
              style="display:inline-block"
            ></el-rate>
          </div>
          <div>
            <span class="edit_span">实用性：</span>
            <el-rate
              v-model="stars.practicability"
              disabled
              :max="stars.max"
              show-score
              allow-half
              style="display:inline-block"
            ></el-rate>
          </div>
          <div>
            <span class="edit_span">易学性:</span>
            <el-rate
              v-model="stars.learnability"
              :max="stars.max"
              disabled
              allow-half
              show-score
              style="display:inline-block"
            ></el-rate>
          </div>
          <div style="line-height:35px;margin:20px 0;" v-html="item.content"></div>
          <div>
            <div style="margin-top:10px">
              <div class="intersection">
                <span class="iconfont" @click="showItemComment(item)">&#xe675; {{item.commentNum}}</span>
                <span class="iconfont">&#xe7c8; {{item.userLike}}</span>
                <span class="iconfont">&#xe7c9; {{item.userDislike}}</span>
              </div>
              <div style="clear:both"></div>
              <div v-if="item.showComment" class="showComment">
                <div>
                  <h1>{{item.commentNum}}条评论</h1>
                  <span>
                    <el-button type="text" style="float:right" @click="item.showComment=false">
                      <span class="iconfont">&#xe782;</span> 收起
                    </el-button>
                  </span>
                </div>

                <div
                  v-for="(childs,childindex) of item.commentsDetail"
                  :key="childindex+'commentNum'"
                  style="margin:10px 0"
                >
                  <div class="commentsDetail">
                    <div>
                      <img :src="childs.avatar" alt style="width:70px;height:70px;">
                    </div>
                    <div
                      style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                    >
                      <div>{{childs.nickName}}</div>
                      <div>{{childs.issueTime|formatTime('YMDHMS')}}</div>
                    </div>
                    <div
                      style="display:flex;flex-direction:column;justify-content:space-around;margin:0 20px"
                    >
                      <div>:{{childs.content}}</div>
                      <div>
                        <span class="iconfont" @click="likeIt(childs)">&#xe7c8; {{childs.userLike}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCourseCommentDetail, getcommentList } from "@/api/ajax";
export default {
  name: "comments",
  data() {
    return {
      item: {
        commentsDetail: {}
      },
      title: "",
      bread: [],
      nope: [],
      stars: {},
      fromperson:false
    };
  },
  methods: {
    wentback() {
      this.$router.go(-1);
    },
    handleData() {
      if (this.$route.query.item) {
        let item = JSON.parse(this.$route.query.item);
        getCourseCommentDetail(item.id).then(res => {
          this.stars = res.data.data;
          this.item = Object.assign({}, this.item, res.data.data, {
            showComment: false
          });
          this.stars.text = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
          this.stars.max = 5;
          this.stars.learnability = this.stars.learnability / 2;
          this.stars.logicality = this.stars.logicality / 2;
          this.stars.practicability = this.stars.practicability / 2;
          this.stars.score = this.stars.score / 2;
        });
      }
    },
    showItemComment(item) {
      if (this.item.commentNum > 0) {
        this.item.showComment = true;
        let params = {};
        let id = this.item.id;
        getcommentList(id, params).then(res => {
          if (res.data.code == 0) {
            this.item.commentsDetail = Object.assign({}, res.data.data.rows);
          }
        });
      }
    }
  },
  components: {},
  mounted() {
    this.handleData();
  }
};
</script>

<style lang="less" scoped>
@import "~styles/z.less";
@import "~styles/css3.less";
@import "~styles/variables.less";
.wrapper {
  background: white;
  margin-bottom: 80px;
}
.commentsDetail {
  display: flex;
}
.showComment {
  min-height: 300px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  margin: 10px 0;
  width: 93%;
  padding: 20px;
}
.commentTitle {
  font-size: 20px;
  font-weigth: bold;
  margin: 20px 0;
}
.commentDetail {
  border: 1px solid #c0c4cc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  min-height: 800px;
  padding: 30px !important;
}
.plus {
  font-size: 40px;
  font-weight: bold;
  .abs;
  right: 190px;
  & span {
    color: orange;
  }
}
.editTitle {
  .MainFont;
  margin: 20px 0;
}
.editTitle_01 {
  .secondFont;
  margin: 10px 0;
}
.edit_span {
  display: inline-block;
  width: 80px;
  margin-right: 2px;
}
.intersection {
  width: 20%;
  float: right;
  display: flex;
  & span {
    display: inline-block;
    width: 33%;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
</style>
